<template>
  <div class="flex justify-center items-center relative">
    <template v-for="(item, index) of data" :key="index">
      <div v-if="index < maxLength" class="previewBox" :style="{ width: previewWidth + 'px' }">
        <!-- 图片 -->
        <div v-if="checkMediaType('IMAGE', item.attachmentDocType)" class="mr-[4px]">
          <a-image
            width="100%"
            :src="item.url"
            :preview="{
              visible: item.visible,
              onVisibleChange: (v: boolean) => (item.visible = v)
            }"
          />
          <div class="mask">
            <eye-outlined style="color: #fff" class="cursor-pointer" @click.stop="onPreview(item)" />
            <download-outlined style="color: #fff" class="cursor-pointer" @click.stop="onDownload(item)" />
          </div>
        </div>
        <!-- PDF -->
        <div v-else-if="checkMediaType('PDF', item.attachmentDocType)" class="mr-[4px]">
          <PDFIcon />
          <div class="mask" style="width: 100%; height: 100%">
            <eye-outlined style="color: #fff" class="cursor-pointer" @click.stop="onPreview(item)" />
            <download-outlined style="color: #fff" class="cursor-pointer" @click.stop="onDownload(item)" />
          </div>
        </div>
        <!-- EXCEL -->
        <div v-else-if="checkMediaType('EXCEL', item.attachmentDocType)" class="mr-[4px]">
          <EXCELIcon />
          <div class="mask" style="width: 100%; height: 100%">
            <download-outlined style="color: #fff" class="cursor-pointer" @click.stop="onDownload(item)" />
          </div>
        </div>
        <!-- PPT -->
        <div v-else-if="checkMediaType('PPT', item.attachmentDocType)" class="mr-[4px]">
          <PPTIcon />
          <div class="mask" style="width: 100%; height: 100%">
            <download-outlined style="color: #fff" class="cursor-pointer" @click.stop="onDownload(item)" />
          </div>
        </div>
        <!-- WORD -->
        <div v-else-if="checkMediaType('WORD', item.attachmentDocType)" class="mr-[4px]">
          <WORDIcon />
          <div class="mask" style="width: 100%; height: 100%">
            <download-outlined style="color: #fff" class="cursor-pointer" @click.stop="onDownload(item)" />
          </div>
        </div>
        <!-- UNKNOWN -->
        <div v-else class="mr-[4px]">
          <UNKNOWNIcon />
          <div class="mask" style="width: 100%; height: 100%">
            <download-outlined style="color: #fff" class="cursor-pointer" @click.stop="onDownload(item)" />
          </div>
        </div>
      </div>
    </template>
    <a-tooltip v-if="moreData && data.slice(maxLength).length > 0" placement="top" color="#fff">
      <template #title>
        <div class="w-full">
          <CImageView :data="data.slice(maxLength)" :max-length="999" :more-data="false" />
        </div>
      </template>
      <MOREIcon />
    </a-tooltip>
  </div>
</template>
<script setup lang="ts">
import { EXCELIcon, MOREIcon, PDFIcon, PPTIcon, UNKNOWNIcon, WORDIcon } from './icon'

/**
 * 静态数据
 * */
const MINE_TYPE = {
  IMAGE: ['png', 'jpg', 'jpeg', 'webp', 'gif'], // 图片
  WORD: ['application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'], // doc,docx
  EXCEL: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'], // xls,xlsx
  PDF: ['application/pdf'], // pdf
  PPT: ['application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation'] // ppt,pptx
}
// 检查文件类型
const checkMediaType = (type: keyof typeof MINE_TYPE, attachmentDocType: string) => {
  return MINE_TYPE[type].includes((type !== 'IMAGE' ? 'application/' : '') + attachmentDocType)
}

/**
 * 组件定义
 * */
interface Option {
  data: any[] // 数据
  previewWidth?: number // 预览宽度
  maxLength?: number // 最大显示数量
  moreData?: boolean // 是否显示更多
}

withDefaults(defineProps<Option>(), {
  previewWidth: 30,
  maxLength: 3,
  moreData: true
})

/**
 * 预览与下载
 * */
const onPreview = item => {
  if (checkMediaType('IMAGE', item.attachmentDocType)) {
    item.visible = true
  } else if (checkMediaType('PDF', item.attachmentDocType)) {
    window.open(item.url, '_blank')
  }
}
const onDownload = item => {
  if (checkMediaType('IMAGE', item.attachmentDocType)) {
    window.location.href = `${item.url}`
  } else {
    downloadFile(item.url)
  }
}

/**
 * 下载文件方法
 * */
const downloadFile = (href: string) => {
  const downloadElement = document.createElement('a')
  downloadElement.href = href
  document.body.appendChild(downloadElement)
  downloadElement.click()
  document.body.removeChild(downloadElement)
  window.URL.revokeObjectURL(href)
}
</script>

<style lang="scss" scoped>
.previewBox {
  position: relative;
  .mask {
    width: 26px;
    height: calc(100% - 4px);
    background: rgba(0, 0, 0, 0.5);
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin-right: 8px;
    }
  }
}
.previewBox:hover .mask {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
